<template>
	<view class="m-fun-game cover-screen-position" @touchend.stop>


		<!-- 		<view class="testEffec flex-row-center-center">
			<view class="one-effect"></view>
			<view class="tow-effct"></view>

		</view> -->

		<view class="effect-box flex-column-center-center" :class="{'effect-show':isEffectShow}"
			:style="{top:effectTop+'rpx'}">
			<image class="effect-img" v-show="isImgEffectShow&&effectType=='perfect'" :src="actJudeEffect.perfect"
				mode="aspectFill"></image>
			<image class="effect-img" v-show="isImgEffectShow&&effectType=='great'" :src="actJudeEffect.great"
				mode="aspectFill"></image>
			<image class="effect-img" v-show="isImgEffectShow&&effectType=='miss'" :src="actJudeEffect.miss"
				mode="aspectFill"></image>
			<view class="perfect-times flex-row-center-center"
				:class="{'show-effect-times':isImgEffectShow&&((perfectTimes&&effectType=='perfect')||(calcMissNum&&effectType=='miss'))}">
				<text v-if="effectType=='perfect'&&perfectTimes>1">x{{perfectTimes}}</text>
			</view>
		</view>
		<view class="piano-box cover-screen-position flex-column-start-center" v-if="gameType=='piano'">
			<!-- :style="{backgroundImage:'url('+bgUrl+')'}" -->
			<view class="m-scroll">
				<view class="score-box flex-row-center-center" :style="{top:scoreTop+'rpx'}" v-if="isStartGame">
					{{scoreNum}}
				</view>

				<view class="life-box flex-row-center-center"
					:style="{top:prayerBeadsTop+'rpx',height:lifeBoxHeight+'rpx'}" v-if="isStartGame&&!failFlag">
					<view class="life-box-content flex-row-center-center" :class="{'gray-scale':calcMissNum<=0}">
						<image class="cover-img"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/402a0b461a5c4e46b127b19fb939bb6a.png"
							mode="aspectFill"></image>
						<view class="heart-num">{{calcMissNum}}</view>
					</view>
				</view>

				<view class="over-shoot-box" :style="{top:scoreTop+'rpx',height:lifeBoxHeight+'rpx'}">
					<view class="over-shoot flex-row-start-center" v-if="isStartGame&&!failFlag">
						<view class="over-shoot-avatar">
							<image class="cover-img" :src="overShootTarget.avatar" mode="aspectFill"></image>
						</view>
						<view class="over-shoot-tips">
							<text v-if="scoreNum<=overShootTarget.score">待超越</text>
							<text v-else>已超越</text>
						</view>
						<view class="over-shoot-score">{{overShootTarget.score}}</view>

					</view>
				</view>



				<!-- :style="{bottom:perPectLineHeight+'rpx'}" -->
				<!-- ,'transition-duration':pianoSpeed/1000+'s' -->
				<view class="start-content" :style="{bottom:-pianoScroll+'rpx'}">
					<view class="piano-list flex-column-start-center" :style="{height:listHeight+'vh'}">
						<view class="piano-row flex-row-start-start" v-for="(item,index) in list" :key="item.id"
							:style="{height:'25vh'}">
							<view class="piano-column-item flex-row-center-center"
								:class="{'black-item':citem==1&&(!item.type||item.type!='start'),'white-item':(citem==0||citem==2),'start-item':citem==1&&(item.type&&item.type=='start'),'fail-bling':citem==1&&(item.type&&item.type=='fail'),'fail-white':citem==-1}"
								v-for="(citem,cindex) in item.data" :key="cindex" :id="item.id">
								<!-- v-if="citem==1" -->
								<view class="piano-column-item-content"
									:class="{'flex-row-center-center':pinaoBlockType=='full','piano-full-item':pinaoBlockType=='full'&&!pianoBlockImage,'flex-column-end-center':pinaoBlockType!='full','hidePianoColumnItem':citem!=1}">
									<view v-if="pinaoBlockType=='full'" class="piano-content-click-area"
										@touchstart="handlePianoItemClick(item,citem,cindex,index,$event)"
										@touchend.stop>
										<image v-if="pianoBlockImage" class="cover-img piano-circle-img"
											:src="pianoBlockImage" mode="aspectFill"></image>
									</view>
									<view v-if="pinaoBlockType=='circle'" class="piano-content-click-area "
										:style="{width:pianoColumnWidth+'rpx',height:pianoColumnWidth+'rpx'}"
										@touchstart="handlePianoItemClick(item,citem,cindex,index,$event)"
										@touchend.stop>
										<image class="cover-img piano-circle-img" :src="pianoBlockImage"
											mode="aspectFill"></image>
									</view>
									<view v-if="pinaoBlockType=='auto'" class="piano-content-click-area"
										:style="{height:pianoBlockAutoHeight+'rpx'}"
										@touchstart="handlePianoItemClick(item,citem,cindex,index,$event)"
										@touchend.stop>
										<image class="cover-img" :src="pianoBlockImage" mode="aspectFill"></image>
									</view>
								</view>


								<view class="piano-click-effect "
									:class="{'flex-row-center-center':pinaoBlockType=='full','flex-column-end-center':pinaoBlockType!='full'}"
									v-if="citem==2">
									<view v-if="pinaoBlockType=='full'" class="piano-click-effect-content"
										:class="{'piano-click-effect-content-no-img':!pianoBlockImage}">
										<view class="effect-after" v-if="!pianoBlockImage"></view>
										<image v-if="pianoBlockImage" class="cover-img" :src="pianoBlockImage"
											mode="aspectFill"></image>
									</view>
									<view v-if="pinaoBlockType=='circle'"
										class="piano-click-effect-content pinao-click-effect-circle"
										:style="{width:pianoColumnWidth+'rpx',height:pianoColumnWidth+'rpx'}"
										:class="{'piano-click-effect-content-no-img':!pianoBlockImage}">
										<view class="effect-after" v-if="!pianoBlockImage"></view>
										<image v-if="pianoBlockImage" class="cover-img" :src="pianoBlockImage"
											mode="aspectFill"></image>
									</view>
									<view v-if="pinaoBlockType=='auto'" class="piano-click-effect-content"
										:style="{height:pianoBlockAutoHeight+'rpx'}"
										:class="{'piano-click-effect-content-no-img':!pianoBlockImage}">
										<view class="effect-after" :style="{'border-radius':pianoBlockAutoRadius+'rpx'}"
											v-if="!pianoBlockImage"></view>
										<image v-if="pianoBlockImage" class="cover-img" :src="pianoBlockImage"
											mode="aspectFill" :style="{'border-radius':pianoBlockAutoRadius+'rpx'}">
										</image>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- isStartGame 所有线条之后要加上开始游戏之后显示的判断逻辑-->
			<view class="perfect-line perfect-only-line flex-row-center-center"
				:style="{bottom:'25vh','box-shadow':`0rpx 0rpx 5rpx ${actString.lineColor},0rpx 0rpx 10rpx ${actString.lineColor},0rpx 0rpx 15rpx ${actString.lineColor},0rpx 0rpx 20rpx ${actString.lineColor},0rpx 0rpx 30rpx ${actString.lineColor}`}"
				v-if="actString.type=='onlyLine'&&isStartGame">
				<view class="perfect-line-item flex-row-center-center" v-for="(item,index) in lineCircleList"
					:key="index">
					<view class="circle-effect-box flex-row-center-center">
						<view class="circle-effect-img">
							<image class="cover-img  circle-effect-inner"
								:class="{'show-circle-effect':item.showClickEffect}" :src="actString.clickEffectImg"
								mode="aspectFill"></image>
						</view>
						<view class="ripple-effect flex-row-center-center" v-if="item.showClickEffect">
							<view class="ripple-effect-content flex-row-center-center"
								:style="{'box-shadow':`inset 0rpx 0rpx 10rpx ${actString.lineColor}, 0rpx 0rpx 10rpx ${actString.lineColor};`}">
								<view class="ripple-effect-content-center"
									:style="{'box-shadow':`inset 0rpx 0rpx 10rpx ${actString.lineColor}, 0rpx 0rpx 10rpx ${actString.lineColor};`}"
									v-if="effectType=='perfect'"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="perfect-line flex-row-center-center" :style="{bottom:'25vh'}"
				v-if="actString.type=='hollowCircle'&&isStartGame">
				<view class="perfect-line-item flex-row-center-center" v-for="(item,index) in lineCircleList"
					:key="index">
					<view class="line-hollow-content"
						:style="{'box-shadow':`0rpx 0rpx 5rpx ${actString.lineColor},0rpx 0rpx 10rpx ${actString.lineColor},0rpx 0rpx 15rpx ${actString.lineColor},0rpx 0rpx 20rpx ${actString.lineColor},0rpx 0rpx 30rpx ${actString.lineColor}`}">
					</view>
					<view class="circle-hollow-content flex-row-center-center"
						:style="{'box-shadow':`0rpx 0rpx 5rpx ${actString.lineColor},0rpx 0rpx 10rpx ${actString.lineColor},0rpx 0rpx 15rpx ${actString.lineColor},0rpx 0rpx 20rpx ${actString.lineColor},0rpx 0rpx 30rpx ${actString.lineColor}`}">
						<view class="square-content"></view>
					</view>
					<view class="circle-effect-box flex-row-center-center">
						<view class="circle-effect-img">
							<image class="cover-img  circle-effect-inner"
								:class="{'show-circle-effect':item.showClickEffect}" :src="actString.clickEffectImg"
								mode="aspectFill"></image>
						</view>
						<view class="ripple-effect flex-row-center-center" v-if="item.showClickEffect">
							<view class="ripple-effect-content flex-row-center-center"
								:style="{'box-shadow':`inset 0rpx 0rpx 10rpx ${actString.lineColor}, 0rpx 0rpx 10rpx ${actString.lineColor};`}">
								<view class="ripple-effect-content-center"
									:style="{'box-shadow':`inset 0rpx 0rpx 10rpx ${actString.lineColor}, 0rpx 0rpx 10rpx ${actString.lineColor};`}"
									v-if="effectType=='perfect'"></view>
							</view>
						</view>
					</view>
					<view class="line-hollow-content"
						:style="{'box-shadow':`0rpx 0rpx 5rpx ${actString.lineColor},0rpx 0rpx 10rpx ${actString.lineColor},0rpx 0rpx 15rpx ${actString.lineColor},0rpx 0rpx 20rpx ${actString.lineColor},0rpx 0rpx 30rpx ${actString.lineColor}`}">

						<view class="line-hollow-content-son"></view>
					</view>
				</view>
			</view>


			<view class="perfect-line flex-row-center-center" :style="{bottom:'25vh'}"
				v-if="actString.type=='solidCircle'&&isStartGame">
				<view class="perfect-line-item flex-row-center-center" v-for="item in 4">
					<view class="line-solid-content"
						:style="{'background-color':`${actString.lineColor}`,'box-shadow':`0rpx 0rpx 10rpx ${actString.lineColor}`}">
					</view>
					<view class="circle-solid-content flex-row-center-center">
						<view class="circle-solid-con"
							:style="{'background-color':`${actString.lineColor}`,'box-shadow':`0rpx 0rpx 10rpx ${actString.lineColor},0rpx 0rpx 10rpx ${actString.lineColor},0rpx 0rpx 10rpx ${actString.lineColor}`}">
						</view>
						<view class="circle-solid-inner"
							:style="{'background-color':`${hexToRgb(actString.lineColor,0.3)}`,'box-shadow':`0rpx 0rpx 10rpx ${actString.lineColor}`}">
						</view>
					</view>
					<view class="line-solid-content"
						:style="{'background-color':`${actString.lineColor}`,'box-shadow':`0rpx 0rpx 10rpx ${actString.lineColor}`}">
					</view>
				</view>
			</view>

			<view class="perfect-line flex-row-center-center" :style="{bottom:'25vh'}"
				v-if="actString.type=='thickLine'&&isStartGame">
				<view class="perfect-line-item flex-row-center-center" v-for="item in 4">
					<view class="line-item-ring flex-row-center-center"
						:style="{'border-color':`${actString.lineColorhexToRgb}`,'box-shadow':`0rpx 0rpx 20rpx ${actString.lineColor}, 0rpx 0rpx 10rpx ${actString.lineColor}`}">
						<view class="line-item-ring-center"
							:style="{'border-color':`${actString.lineColor}`,'box-shadow':`0rpx 0rpx 20rpx ${actString.lineColor}`}">
						</view>
					</view>
				</view>
			</view>

			<!--  -->
			<!-- !isStartGame -->
			<view class="start-piano-btn" :style="{bottom:pianoRowHeight+'rpx'}" v-if="!isStartGame">
				<view class="start-piano-btn-effect flex-row-center-center" @touchstart="handleStartGame('start')">
					<view class="start-effect-circle"></view>
					<view class="start-pino-text flex-row-center-center">开 始</view>
				</view>
			</view>

		</view>

		<view class="bubbles-box cover-screen-position flex-column-start-center" v-if="gameType=='bubbles'">

			<view class="bubble-table flex-row-start-start" @click="handleStartBubble">
				<view class="table-item flex-row-center-center" v-for="(item,index) in bubbleDatas" :key="item.id">
					<!-- nowBubbleIndexList.includes(index) -->
					<view class="bubble-content" :style="{width:baseSize+'rpx',height:baseSize+'rpx'}"
						v-if="nowBubbleIndexList.includes(index)">
						<view class="bubble-item-border-in flex-row-center-center"
							@touchstart="handleBubbleClick(item,$event)">
							<view class="bubble-item-border-content flex-row-center-center"
								:class="{'boder-in-hide':item.type}" :id="item.id">
							</view>
						</view>
						<view class="bubble-item-border-out flex-row-center-center" v-if="item.type">
							<view class="bubble-item-border-content flex-row-center-center">
							</view>
						</view>
						<view class="bubble-effect  flex-row-center-center" v-if="item.type">
							<view class="bubble-effect-content flex-row-center-center">
								{{item.type}}
							</view>
						</view>
					</view>
				</view>

			</view>


		</view>

		<view class="top-btn flex-column-start-center" :style="{top:prayerBeadsTop+'rpx'}" v-if="!isStartGame">
			<view class="btn-item flex-row-center-center" v-for="(item,index) in rightBtnList" :key="index"
				@click="handleBtnClick(item,index)">
				<image class="cover-img" :src="item.icon" mode="aspectFill"></image>
			</view>
		</view>

		<view class="mode-modal game-modal" :class="{'no-bottom-tab':(modalType=='set'||modalType=='prop')}"
			v-if="showModel" @click="handleCloseModal">
			<view class="modal-content-box mode-modal-content flex-column-start-center" @click.stop>
				<view class="modal-title modal-transparent-title">
					<image class="image-title" :src="modalTitleImg" mode="aspectFill"></image>
					<view class="close-icon" @click="handleCloseModal">
						<image class="cover-img"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9cfc771011e642908073bd33850b419d.png"
							mode="aspectFill"></image>
					</view>
				</view>
				<view class="modal-content flex-column-start-center">
					<view class="game-set-box flex-column-start-center" v-if="modalType=='set'">
						<view class="title-box">
							<view class="title-content">
								<view class="left-tip">
									<view class="tip-icon"></view>
									<view class="tip-text">音符</view>
								</view>
								<view class="right-content"></view>
							</view>
						</view>

						<view class="setting-scroll-box">
							<scroll-view ref="clothesScrollView" scroll-y class="scroll-content" :show-scrollbar="false"
								:scroll-with-animation="true">
								<view class="setting-scroll-content flex-row-center-start">
									<view class="setting-scroll-list flex-row-start-start">
										<view class="setting-scroll-item good-after-before "
											v-for="(item,index) in clothesList" :key="index" :class="{
							      'green-good': item.RarityLevel == 1,
							      'orange-good': item.RarityLevel == 2,
							      'blue-good': item.RarityLevel == 3,
							      'purple-good': item.RarityLevel == 4,
								  'act-setting-scroll-clothes':index ==actPianoClothesIndex
							    }" @click="handleSettingItemClick(item,index,'piano')">
											<image class="cover-img" :src="item.image" mode="aspectFill"
												:class="{'isSelected':index ==actPianoClothesIndex}"></image>
											<view class="item-masker flex-row-center-center" v-if="item.locked">
												<image class="locked-icon"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
													mode="aspectFill"></image>
											</view>
											<view class="setting-use-item-label" v-if="item.isUse">使用中</view>
											<view class="item-border-masker"></view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="title-box">
							<view class="title-content">
								<view class="left-tip">
									<view class="tip-icon"></view>
									<view class="tip-text">音弦</view>
								</view>
								<view class="right-content"></view>
							</view>
						</view>

						<view class="setting-scroll-box">
							<scroll-view ref="clothesScrollView" scroll-y class="scroll-content" :show-scrollbar="false"
								:scroll-with-animation="true">
								<view class="setting-scroll-content flex-row-center-start">
									<view class="setting-scroll-list flex-row-start-start ">
										<view class="setting-scroll-item  full-img-scroll-item"
											v-for="(item,index) in pianoStringList" :key="index" :class="{
								  'act-setting-scroll-clothes':index ==actStringIndex
							    }" @click="handleSettingItemClick(item,index,'string')">
											<image class="cover-img" :src="item.image" mode="aspectFill"
												:class="{'isSelected':index ==actStringIndex}"></image>
											<view class="item-masker flex-row-center-center" v-if="item.locked">
												<image class="locked-icon"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
													mode="aspectFill"></image>
											</view>
											<view class="setting-use-item-label" v-if="item.isUse">使用中</view>
											<view class="item-border-masker"></view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="title-box">
							<view class="title-content">
								<view class="left-tip">
									<view class="tip-icon"></view>
									<view class="tip-text">判定</view>
								</view>
								<view class="right-content"></view>
							</view>
						</view>

						<view class="setting-scroll-box judge-clothes-box">
							<scroll-view ref="clothesScrollView" scroll-y class="scroll-content" :show-scrollbar="false"
								:scroll-with-animation="true">
								<view class="setting-scroll-content flex-row-center-start">
									<view class="setting-scroll-list flex-row-start-start">
										<view class="setting-scroll-item good-after-before flex-row-center-center"
											v-for="(item,index) in judgeList" :key="index" :class="{
							      'green-good': item.RarityLevel == 1,
							      'orange-good': item.RarityLevel == 2,
							      'blue-good': item.RarityLevel == 3,
							      'purple-good': item.RarityLevel == 4,
								  'act-setting-scroll-clothes':index ==actJudgeIndex
							    }" @click="handleSettingItemClick(item,index,'judge')">
											<image class="cover-img" :src="item.perfect" mode="widthFix"
												:class="{'isSelected':index ==actJudgeIndex}"></image>
											<view class="item-masker flex-row-center-center" v-if="item.locked">
												<image class="locked-icon"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
													mode="aspectFill"></image>
											</view>
											<view class="setting-use-item-label" v-if="item.isUse">使用中</view>
											<view class="item-border-masker"></view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>

						<view class="save-setting">
							<view class="btn-box flex-row-center-center">
								<view class="btn-item" @click="handleSaveSetting">
									<view class="btn-content start-live-btn">保 存</view>
								</view>
							</view>
						</view>

					</view>
					<view class="prop-box flex-column-start-center" v-if="modalType=='prop'">
						<view class="title-box">
							<view class="title-content">
								<view class="left-tip">
									<view class="tip-icon"></view>
									<view class="tip-text">局内道具（1/3）</view>
								</view>
								<view class="right-content">
									<view class="has-consume-thing-box flex-row-end-center" style="width: 100%;">
										<view class="consume-thing flex-row-start-center">
											<image
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
												class="consume-thing-icon" mode="aspectFill"></image>
											<view class="consume-thing-num flex-row-center-center">20</view>
											<view class="consume-thing-add flex-row-center-center">
												<image
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
													class="cover-img" mode="aspectFill"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="prop-list flex-row-start-start">
							<view class="prop-item flex-column-center-center " v-for="(item, index) in propList"
								:key="index" @click="handlePropItemClick(item,index)">
								<view class="prop-item-content good-after-before flex-row-center-center" :class="{
                      'green-good': item.RarityLevel == 1,
                      'orange-good': item.RarityLevel == 2,
                      'blue-good': item.RarityLevel == 3,
                      'purple-good': item.RarityLevel == 4,
                    }">
									<image class="cover-img" :src="item.image" mode="aspectFill"></image>
									<view v-if="item.num || item.num === 0" class="thing-num">{{
						  item.num
						}}</view>
									<view class="setting-use-item-label" v-if="item.isUse">已装备</view>
									<!-- 			<view class="prop-masker flex-row-center-center" v-else>
										<text v-if="item.num>0">点击装备</text>
										<text v-else>去获取</text>
									</view> -->
								</view>
								<view class="prop-name">{{item.name}}</view>

								<view class="prop-buy-btn flex-row-center-center"
									:class="{'btnIsClick':index==btnClickIndex,'cancleBtn':item.isUse}"
									@click="handlePropBuy(item,index)">
									<image class="consume-icon" v-if="!item.num"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
										mode="aspectFill"></image>
									<text v-if="!item.num">{{item.price}}</text>
									<text v-if="item.isUse">取消</text>
									<text v-if="!item.isUse&&item.num">装备</text>
								</view>
							</view>

						</view>
					</view>
				</view>

			</view>


			<view class="bottom-tip">
				<view class="left-point"></view>
				<view class="center-content">点击任意空白区域关闭</view>
				<view class="right-point"></view>
			</view>
		</view>


		<view class="game-result-box cover-screen-position flex-column-center-center" v-if="showResult"
			@click="handleCloseResult">
			<view class="result-stars-box flex-row-center-center">
				<view class="result-star-item" v-for="(item,index) in getResultStarts(resultStarLevel)"
					:class="{'gray-scale':!item.shine}">
					<image class="cover-img" v-if="resultStarLevel<=3"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6d801d979c8b4a18952f2cd17ecffb20.png"
						mode="aspectFill"></image>
					<image class="cover-img" v-else
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/21a5532ced604e3a9e11ea804e6d436d.png"
						mode="aspectFill"></image>
				</view>
			</view>
			<view class="result-score-box flex-row-center-center">{{scoreNum}}</view>
			<view class="result-reward-box">
				<view class="success-reward-tip flex-row-center-center">
					<view class="left-line"></view>
					<view class="center-text flex-row-between-center">
						<image class="tip-icon"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d3f203bb17c6419fabf3318a1196e8c6.png"
							mode=""></image>
						<text class="tip-text">恭喜获得</text>
						<image class="tip-icon"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d3f203bb17c6419fabf3318a1196e8c6.png"
							mode=""></image>
					</view>
					<view class="right-line"></view>
				</view>

				<view class="success-reward-list flex-row-center-center">
					<view class="reward-item good-after-before" :class="{
                      'green-good': item.RarityLevel == 1,
                      'orange-good': item.RarityLevel == 2,
                      'blue-good': item.RarityLevel == 3,
                      'purple-good': item.RarityLevel == 4,
                    }" v-for="(item,index) in successDataList" :key="index">
						<image class="cover-img" :src="item.icon" mode="aspectFill"></image>

						<view class="thing-num">{{item.num}}</view>
					</view>
				</view>
				<view class="bottom-tip">
					<view class="left-point"></view>
					<view class="center-content">点击任意空白区域关闭</view>
					<view class="right-point"></view>
				</view>
			</view>
		</view>


		<view class="reborn-box cover-screen-position flex-column-center-center" v-if="showReborn">
			<view class="tip-img">
				<image class="cover-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/25e6ae82bab040168aafd727f5eb6490.png"
					mode="aspectFill"></image>
			</view>
			<view class="tips-text flex-row-center-center">- 再努力下就成功了哦 -</view>
			<view class="reborn-btn reborn-btn-no flex-row-center-center" @click="handleGiveUpGame">放弃</view>
			<view class="reborn-btn reborn-btn-yes flex-row-center-center" @click="handleRebornGame">
				<view class="reborn-btn-consume flex-row-center-center">
					<image class="reborn-consume-icon"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
						mode="aspectFill"></image>
					<text class="reborn-consume-num">x20</text>
				</view>
				复活
			</view>
		</view>




	</view>

</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		getDanceGameSetting,
		saveDanceGameSetting
	} from '@/api/game.js'
	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				},

			},
			storyId: {
				type: String,
				default: "",
			},
		},
		components: {},
		data() {
			return {
				// 绘制相关
				lastTime: 0,
				needDraw: false,
				frameId: null,
				// 复活页面相关
				showReborn: false,
				// 结算页面相关
				showResult: false,
				resultStarLevel: 4,
				successDataList: [{
						name: "金币",
						type: "prop",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/531cc17604ec435286166761419a50e2.png",
						RarityLevel: 1
					},
					{
						name: "以太币",
						type: "prop",
						num: 2,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/178967f2db9e4b21b9250c0c4ba950ad.png",
						RarityLevel: 2
					},
					{
						name: "改名卡",
						type: "prop",
						num: 3,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d7e3221ac72943e4b6c8bd5aee2cabca.png",
						RarityLevel: 3
					},
				],
				//
				overShootTarget: {
					avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7db54a57c28d40c2a72ad886b82e66b0.jpg",
					score: 200,
				},
				actString: {
					type: "onlyLine", //onlyLine一条线  hollowCircle线上有空心圆    solidCircle线上游实心圆  thickLine粗线
					lineColor: "#2dddd5", // #f915e7 #2dddd5 #fefe87
					clickEffectImg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c210c5909a5d40c9bb63fae6e2a25333.png",
				},

				pianoBlockImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a0c6c64471e9419ca67748ff555a2232.png",
				actJudeEffect: {
					id: 0,
					perfect: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/142e02444e7d4d7ab1ff90473906bb90.png",
					great: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f52e6c6dd33a4ceb9635927ccef7eb6b.png",
					miss: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/29f03720f4c04e298feed45f75a1f15e.png",
					RarityLevel: 1
				},
				showCircleIndex: -1,
				lineCircleList: [{
						id: 0,
						showClickEffect: false
					},
					{
						id: 1,
						showClickEffect: false
					},
					{
						id: 2,
						showClickEffect: false
					},
					{
						id: 3,
						showClickEffect: false
					},
				],
				// 弹窗
				showModel: false,
				modalType: 'set',
				settingForm: {
					pianoStringId: null,
					judeEffectId: null,
					pianoClothesId: null
				},

				judgeList: [],
				pianoStringList: [],
				pianoClothesList: [],
				clothesList: [],
				actPianoClothesIndex: -1,
				actStringIndex: -1,
				actJudgeIndex: -1,
				btnClickIndex: -1,
				propList: [{
						name: "免疫伤害1次",
						num: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/531cc17604ec435286166761419a50e2.png",
						RarityLevel: 1,
						price: 100,
						isUse: true
					},
					{
						name: "抵消3次miss",
						num: 2,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/178967f2db9e4b21b9250c0c4ba950ad.png",
						RarityLevel: 2,
						price: 200,
						isUse: false
					},
					{
						name: "延长狂热时间",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d7e3221ac72943e4b6c8bd5aee2cabca.png",
						RarityLevel: 3,
						price: 300,
						isUse: false
					},
					{
						name: "抵消3次miss",
						num: 2,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6ab855888adc45e4820e99cc55856d06.png",
						RarityLevel: 4,
						price: 200,
						isUse: false
					},
					{
						name: "抵消3次miss",
						num: 2,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b57607e025034c49bcf2cc465d5903fd.png",
						RarityLevel: 1,
						price: 200,
						isUse: false
					},
					{
						name: "抵消3次miss",
						num: 2,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/366f960ebbe8430f916cb6d917051ed4.png",
						RarityLevel: 2,
						price: 200,
						isUse: false
					},
				],

				// 
				gameType: "piano", // piano钢琴块   bubbles泡泡
				prayerBeadsTop: 200,
				rightBtnList: [{
						name: "排名",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5214b8f1594f4c65bcf1c21a9757d206.png",
						type: "sort"
					},
					{
						name: "道具",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/105a9b0740274d3dad26f8b1f3ab4ef3.png",
						type: "prop"
					},
					{
						name: "设置",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0c9b34cba7394638a2aaf6a6dbed6c6a.png",
						type: "set"
					},
				],
				// 钢琴块配置
				pianoSpeed: 40, // 20 25 50 100毫秒  钢琴块下落速度
				pinaoBlockType: "circle", // full 撑满  circle圆形  auto自定义高
				pianoBlockAutoHeight: 80, // rpx
				pianoBlockAutoRadius: 0, //钢琴块自定义高的圆角弧度
				pinaoData: "", //钢琴块数据
				level: "", //难度等级
				totalScore: "", //通关数值
				pinaoMissNum: 3,
				pianoGreatRange: 9999999, // creat范围  钢琴块泡泡半径倍数
				pianoPerfectPercent: 1, // pefect条件 球中心到音弦距离之差对球半径占比
				// 
				pianoColumnWidth: 200,
				pianoMusicSrc: "",
				audioContext: null,
				pianoScroll: 0,
				bgUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/afd7b9cd3bcd47cea44a822152929ed3.jpg",
				scrollIntervalId: null,
				idCounter: 0,
				listHeight: 150,
				failFlag: false,
				isStartGame: false,
				isEffectShow: false,
				isImgEffectShow: false,
				effectTop: 250,
				showPinaoEffectTimeout: null,
				showPinaoImgTimeout: null,
				effectType: 'perfect', //perfect great miss

				perfectTimes: 0,
				scoreNum: 0,
				scoreTop: 100,
				lifeBoxHeight: 50,
				pianoTemplate: [
					[0, 0, 0, 0],
					[0, 0, 0, 1],
					[0, 0, 1, 0],
					[0, 1, 0, 0],
					[1, 0, 0, 0],
					[1, 0, 0, 1],
					[1, 0, 1, 0],
					[0, 1, 0, 1],
					// [0, 1, 1, 0]
				],
				list: [{
						id: "f0",
						data: [0, 0, 0, 1]
					},
					{
						id: "f1",
						data: [0, 0, 0, 0]
					},
					{
						id: "f2",
						data: [0, 0, 0, 0]
					},
					{
						id: "f3",
						data: [0, 0, 0, 0]
					},
					{
						id: "f4",
						data: [0, 0, 0, 0],
						// type: "start", //start 开始  fail失败
					},
					{
						id: "f5",
						data: [0, 0, 0, 0],
					},

				],
				screenWidth: 375,
				screenHeight: 1624,
				addLog: 0,
				pianoRowHeight: 400,
				perPectLineHeight: 480,
				speedOne: 40,
				calcMissNum: 0,


				// 泡泡
				startBubbleInterValId: null,
				baseSize: 120,
				bubbleGameDataList: [
					[16],
					[-1],
					[18],
					[-1],
					[30, 32],
					[-1],
					[25],
					[38],
					[49],
					[16],
					[-1],
					[18],
					[-1],
					[-1],
					[25],
					[38],
					[49],
					[16],
					[-1],
					[18],
					[-1],
					[-1],
					[25],
					[38],
					[49],

				],
				bubbleDatas: [],
				nowBubbleIndexList: [],
				removalQueue: [],
				circleEffectRemoveQueue: [],
				pianoCirclePefectLog: [],




			}
		},
		mounted() {
			this.getProps()

		},
		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let screenHeight = uni.getSystemInfoSync().screenHeight
				let rpxScreenHeight = this.pxToRpx(screenHeight)
				this.pianoColumnWidth = this.pxToRpx(this.screenWidth) / 4
				this.screenHeight = rpxScreenHeight
				this.pianoRowHeight = rpxScreenHeight / 4
				this.perPectLineHeight = this.pianoRowHeight //
				let oneSpeed = this.pianoRowHeight / 10
				this.speedOne = oneSpeed

				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo
				console.log("获取到的值", top, height);
				this.prayerBeadsTop = this.pxToRpx(height + top + 50)


				this.effectTop = this.pxToRpx(top + height + 50)
				this.scoreTop = this.pxToRpx(top)
				this.lifeBoxHeight = this.pxToRpx(height)

				// 气泡
				this.baseSize = this.pxToRpx(this.screenWidth) / 5 * 0.9
				this.bubbleDatas = Array.from({
					length: 50
				}, (_, index) => ({
					id: `b_${index}`,
					type: null, // perfect great miss
					timeOutId: null,
					index: index
				}));

				// 获取数据
				this.handleGetData()
			} catch (e) {

			}
			this.initAudio()
		},
		computed: {
			...mapState(["curStoryId"]),
			modalTitleImg() {
				let modalType = this.modalType
				switch (modalType) {
					case 'sort':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/425d8a48d600425d97d1841fd99ca9e6.png"
						break;
					case 'set':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7fc866d3ea8d435598c2b011aca197a2.png"
						break;
					case 'prop':
						return "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/12a8231541594806ab0671b306dbd2a7.png"
						break;
					default:
						break;
				}
			},
		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					if (this.storyId && this.storyId != newVal) {
						this.handleGameClose()
					}
				},
				deep: true,
				immediate: true,
			},
			// gameType: {
			// 	handler(newVal, oldVal) {
			// 		if (newVal == "piano") {
			// 			this.clothesList = this.pianoClothesList
			// 		}
			// 	},
			// 	deep: true,
			// 	immediate: true
			// }
		},
		methods: {
			getProps() {
				let paramsJson = this.paramsJson
				this.gameType = paramsJson.gameType && paramsJson.gameType.default ? paramsJson
					.gameType.default :
					this
					.gameType

				this.pianoSpeed = paramsJson.pianoSpeed && paramsJson.pianoSpeed.default ? paramsJson
					.pianoSpeed.default :
					this
					.pianoSpeed

				this.pinaoBlockType = paramsJson.pinaoBlockType && paramsJson.pinaoBlockType.default ? paramsJson
					.pinaoBlockType.default :
					this
					.pinaoBlockType

				this.pianoBlockAutoHeight = paramsJson.pianoBlockAutoHeight && paramsJson.pianoBlockAutoHeight.default ?
					paramsJson
					.pianoBlockAutoHeight.default :
					this
					.pianoBlockAutoHeight

				this.pianoBlockAutoRadius = paramsJson.pianoBlockAutoRadius && paramsJson.pianoBlockAutoRadius.default ?
					paramsJson
					.pianoBlockAutoRadius.default :
					this
					.pianoBlockAutoRadius

				this.pianoBlockImage = paramsJson.pianoBlockImage && paramsJson.pianoBlockImage.default ? paramsJson
					.pianoBlockImage.default :
					this
					.pianoBlockImage

				this.pinaoData = paramsJson.pinaoData && paramsJson.pinaoData.default ? paramsJson
					.pinaoData.default :
					this
					.pinaoData
				this.level = paramsJson.level && paramsJson.level.default ? paramsJson
					.level.default :
					this
					.level
				this.pinaoMissNum = paramsJson.pinaoMissNum && paramsJson.pinaoMissNum.default ? paramsJson
					.pinaoMissNum.default :
					this
					.pinaoMissNum
				this.calcMissNum = this.pinaoMissNum

				this.totalScore = paramsJson.totalScore && paramsJson.totalScore.default ? paramsJson
					.totalScore.default :
					this
					.totalScore

			},
			hexToRgb(hex, alpha) {
				// 移除井号（#）并验证输入
				hex = hex.replace(/^#/, '');
				let r, g, b;
				// 处理三位和六位十六进制颜色
				if (hex.length === 3) {
					r = parseInt(hex[0] + hex[0], 16);
					g = parseInt(hex[1] + hex[1], 16);
					b = parseInt(hex[2] + hex[2], 16);
				} else if (hex.length === 6) {
					r = parseInt(hex.substring(0, 2), 16);
					g = parseInt(hex.substring(2, 4), 16);
					b = parseInt(hex.substring(4, 6), 16);
				} else {
					return null; // 返回 null 表示无效输入
				}
				// 返回 rgba 格式的字符串
				return `rgba(${r}, ${g}, ${b}, ${alpha})`;
			},
			// 结算相关方法
			handleGiveUpGame() {
				this.showReborn = false
				this.handleOpenResult()
			},
			handleRebornGame() {
				this.failFlag = false
				this.showReborn = false
				// this.pinaoMissNum
				this.calcMissNum = 1
				// this.pianoScroll += this.addLog
				this.handleDraw('reborn')
				this.needDraw = true
				this.addLog = 0

				this.list.forEach((item, index) => {
					item.data = [0, 0, 0, 0]
				})
				this.$emit('playVideo')
				// // 重生
				this.handleStartGame('reborn')
			},
			handleOpenResult() {
				this.showResult = true
				this.$emit('showBackBtn')
			},
			handleCloseResult() {
				this.showResult = false
			},
			getResultStarts() {

				let num = parseInt(this.scoreNum / 100) > 6 ? 6 : parseInt(this.scoreNum / 100)
				this.resultStarLevel = num

				let length = num <= 3 ? num : num - 3
				let shineArr = Array.from({
					length: length
				}, () => ({
					shine: true
				}));
				let noShineArr = Array.from({
					length: 3 - length
				}, () => ({
					shine: false
				}));
				return shineArr.concat(noShineArr)
			},

			// 音弦相关方法
			handlePefectLineItemClick(item, index) {

				if (this.pianoCirclePefectLog.includes(item.id)) {
					item.showClickEffect = false
					setTimeout(() => {
						item.showClickEffect = true
					}, 50)
					if (item.timeoutId) {
						clearTimeout(item.timeoutId)
						item.timeoutId = null
					}
				} else {
					item.showClickEffect = true
					this.pianoCirclePefectLog.push(item.id)
				}
				item.timeoutId = setTimeout(() => {
					this.handleRemoveStringCircleEffect(item.id)
				}, 500)

			},
			handleRemoveStringCircleEffect(id) {
				this.circleEffectRemoveQueue.push(id)
				this.processRemoveCircleEffectQueue()
			},
			processRemoveCircleEffectQueue() {
				if (this.circleEffectRemoveQueue.length === 0) return;
				const id = this.circleEffectRemoveQueue[0]
				let item = this.lineCircleList.find((item, index) => {
					return item.id == id
				})
				if (item) {
					item.showClickEffect = false
					item.timeoutId = null

					let index = this.pianoCirclePefectLog.findIndex((citem, cindex) => {
						return citem == item.id
					})
					this.pianoCirclePefectLog.splice(index, 1)
				}

				this.circleEffectRemoveQueue.shift()
				this.processRemoveCircleEffectQueue()
			},
			// 数据获取
			handleGetData() {
				getDanceGameSetting().then(res => {
					let result = res.data.result
					this.judgeList = result.judgeList
					this.pianoClothesList = result.pianoClothesList
					this.pianoStringList = result.pianoStringList

					this.actJudeEffect = this.judgeList.find((item, index) => {
						return item.isUse
					})

					let obj = this.pianoClothesList.find((item, index) => {
						return item.isUse
					})

					this.pianoBlockImage = obj.image

					this.actString = this.pianoStringList.find((item, index) => {
						return item.isUse
					})


					if (this.gameType == 'piano') {
						this.clothesList = this.pianoClothesList
					}
				})
			},

			// 弹窗相关
			handlePropItemClick(item, index) {
				console.log("数据", item);
				if (item.num) {
					item.isUse = !item.isUse
				}
			},
			handleSaveSetting() {
				this.actJudeEffect = this.actJudgeIndex !== -1 ? this.judgeList[this.actJudgeIndex] : this.actJudeEffect
				this.actString = this.actStringIndex !== -1 ? this.pianoStringList[this.actStringIndex] : this.actString
				let obj = this.actPianoClothesIndex !== -1 ? this.pianoClothesList[this.actPianoClothesIndex] : this
					.pianoClothesList[0]



				saveDanceGameSetting({
					pianoStringId: this.actString.id,
					judeEffectId: this.actJudeEffect.id,
					pianoClothesId: obj.id
				}).then(res => {
					this.handleGetData()
				})

				this.showModel = false
			},
			handleCloseModal() {
				this.showModel = false
			},
			handleSettingItemClick(item, index, type) {
				if (item.locked) {
					return
				}
				if (type == 'piano') {
					// this.actFishClothes = item
					this.actPianoClothesIndex = index
				} else if (type == 'judge') {
					this.actJudgeIndex = index
				} else if (type == 'string') {
					this.actStringIndex = index
				}
			},
			handlePropBuy(item, index) {
				this.btnClickIndex = index
				setTimeout(() => {
					this.btnClickIndex = -1
				}, 100)
			},
			// 
			handleGameClose() {
				// 钢琴块重置
				clearInterval(this.scrollIntervalId)
				this.calcMissNum = this.pinaoMissNum
				this.pianoScroll = 0
				this.scrollIntervalId = null
				this.idCounter = 0
				this.listHeight = 150
				this.failFlag = false
				this.isStartGame = false
				this.isEffectShow = false
				this.isImgEffectShow = false
				this.showPinaoEffectTimeout = null
				this.showPinaoImgTimeout = null
				this.perfectTimes = 0
				this.scoreNum = 0
				this.addLog = 0
				this.showResult = false
				this.list = [{
						id: "f0",
						data: [0, 0, 0, 1]
					},
					{
						id: "f1",
						data: [0, 0, 0, 0]
					},
					{
						id: "f2",
						data: [0, 0, 0, 0]
					},
					{
						id: "f3",
						data: [0, 0, 0, 0]
					},
					{
						id: "f4",
						data: [0, 0, 0, 0],
						// type: "start", //start 开始  fail失败
					},
					{
						id: "f5",
						data: [0, 0, 0, 0],
					},

				]
			},
			handleBtnClick(item, index) {
				this.modalType = item.type
				this.showModel = true
			},
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			// 泡泡
			handleStopBubbleGame() {
				clearInterval(this.startBubbleInterValId)
			},
			handleChangeBubbleType(item, type) {
				if (item.timeOutId) {
					clearTimeout(item.timeOutId)
					item.timeOutId = null
				}
				item.type = type
				setTimeout(() => {
					this.handleRemoveBubbleEffect(item.id)
				}, 800)
			},
			handleRemoveBubbleEffect(item) {
				this.removalQueue.push(item); // 将要移除的特效 ID 加入队列
				this.processRemovalQueue(); // 处理移除队列
			},
			processRemovalQueue() {
				// 如果没有待移除特效，结束处理
				if (this.removalQueue.length === 0) return;
				const id = this.removalQueue[0]; // 获取队列中的第一个特效 ID
				let item = this.bubbleDatas.find((item, index) => {
					return item.id == id
				})
				let index = this.nowBubbleIndexList.findIndex(e => e === item.index)
				if (index != -1) {
					this.nowBubbleIndexList.splice(index, 1)
					item.type = null
				}
				this.removalQueue.shift(); // 移除队列中的第一个元素
				this.processRemovalQueue(); // 递归处理下一个
			},

			handleStartBubble() {
				if (this.startBubbleInterValId) {
					return
				}
				this.startBubbleInterValId = setInterval(() => {
					if (this.bubbleGameDataList.length) {
						let arr = this.bubbleGameDataList[0]
						arr.forEach((item, index) => {
							this.nowBubbleIndexList.push(item)
							if (item != -1) {
								this.bubbleDatas[item].timeOutId = setTimeout(() => {
									this.handleChangeBubbleType(this.bubbleDatas[item], "miss")
								}, 1500) //时间到时候要测试
							}

						})
						this.bubbleGameDataList.shift()
					} else {
						this.handleStopBubbleGame()
					}


					console.log("剩余", this.nowBubbleIndexList);
				}, 1000)
			},
			handleBubbleClick(item, e) {
				const query = uni.createSelectorQuery().in(this);
				query
					.select(`#${item.id}`)
					.boundingClientRect((data) => {
						let width = this.pxToRpx(data.width)
						if (width <= (this.baseSize + this.baseSize * 0.2)) {
							this.handleChangeBubbleType(item, 'perfect')
						} else {
							this.handleChangeBubbleType(item, 'great')
						}
					}).exec()

			},

			// 钢琴块
			handleTestEffectClick(type) {
				this.effectType = type
				if (this.showPinaoEffectTimeout || this.showPinaoImgTimeout) {
					clearTimeout(this.showPinaoEffectTimeout)
					clearTimeout(this.showPinaoImgTimeout)
					this.isEffectShow = false
					this.isImgEffectShow = false
					this.showPinaoEffectTimeout = null
					this.showPinaoImgTimeout = null
				}

				this.isEffectShow = true
				this.isImgEffectShow = true
				this.showPinaoEffectTimeout = setTimeout(() => {
					this.isEffectShow = false
					clearTimeout(this.showPinaoEffectTimeout)
					this.showPinaoEffectTimeout = null
				}, 100)
				this.showPinaoImgTimeout = setTimeout(() => {
					this.isImgEffectShow = false
					clearTimeout(this.showPinaoImgTimeout)
					this.showPinaoImgTimeout = null
				}, 300)
			},
			initAudio() {
				return new Promise((resolve, reject) => {
					this.audioContext = uni.createInnerAudioContext()
					this.audioContext.src = this.pianoMusicSrc
					this.audioContext.loop = true
					resolve(true)
				})
			},
			stopPinaoMusic() {
				if (this.audioContext) {
					this.audioContext.stop()
				}
			},
			playPinaoMusic() {
				if (this.audioContext) {
					this.audioContext.stop()
					this.audioContext.play()
				} else {
					this.initAudio().then(res => {
						this.audioContext.play()
					})
				}
			},
			handlePinaoRowClick(e) {},
			handlePianoItemClick(item, citem, cindex, index, e) {
				if (this.failFlag || (!this.isStartGame && item.type != 'start') || (!this.isStartGame && item.type ==
						'start' && citem != 1)) {
					return
				}
				if (item.type && item.type == 'start' && citem == 1) {
					this.handleStartGame()
				}
				if (citem == 1) {
					if (item.type != 'start') {
						const query = uni.createSelectorQuery().in(this);
						query
							.select(`#${item.id}`)
							.boundingClientRect((data) => {
								let trueTop = this.pxToRpx(data.top)
								let bottomHeight = this.screenHeight - trueTop - this.pianoRowHeight
								let circleCenterHeight = bottomHeight + this.pianoColumnWidth / 2
								let sub = Math.abs(circleCenterHeight - this.perPectLineHeight)

								// if (bottomHeight < this.perPectLineHeight) {
								// 	// perfect
								// 	this.perfectTimes++
								// 	this.scoreNum += 2
								// 	this.handleTestEffectClick('perfect')
								// } else {
								// 	// great
								// 	this.perfectTimes = 0
								// 	this.scoreNum++
								// 	this.handleTestEffectClick('great')
								// }

								if (sub <= (this.pianoColumnWidth / 2) * this.pianoGreatRange) {
									let arr = [...item.data]
									arr[cindex] = 2
									item.data = arr

									let percent = sub / (this.pianoColumnWidth / 2)
									if (percent <= this.pianoPerfectPercent) {
										this.handleTestEffectClick('perfect')
										this.perfectTimes++
										this.scoreNum += 2
									} else {
										this.handleTestEffectClick('great')
										this.scoreNum++
										this.perfectTimes = 0
									}

									this.handlePefectLineItemClick(this.lineCircleList[cindex])
								} else {
									// 不做任何操作
									this.perfectTimes = 0
								}

							})
							.exec();


					}


				} else if (citem === 0) {
					// let arr = [...item.data]
					// arr[cindex] = -1
					// item.data = arr
					// this.handleGameOver()
				}

			},
			handleGetRandomPinoData() {
				const randomIndex = Math.floor(Math.random() * this.pianoTemplate.length);
				let arr = this.pianoTemplate[randomIndex];
				let createTime = new Date().getTime()
				let data = {
					id: 'jy_' + this.idCounter,
					data: arr,
					createTime: createTime
				}
				this.idCounter++
				return data
			},
			handleGameOver() {
				this.failFlag = true
				this.stopPinaoMusic()
				this.$emit('pauseVideo')
				clearInterval(this.scrollIntervalId)
				this.scrollIntervalId = null
				this.showReborn = true
				this.handleCancleDraw()
				console.log("当前数据长度", this.list.length);

			},
			handleStartGame(type) {
				if (this.scrollIntervalId) {
					return
				}
				// 开始游戏seek到第0秒
				if (type == 'start') {
					this.$emit('getGameResult', 0)
				}
				this.$emit('hideBackBtn')
				this.isStartGame = true
				this.playPinaoMusic()




				this.scrollIntervalId = setInterval(() => {
					// this.pianoScroll = this.pianoScroll + this.speedOne
					this.handleDraw('add')
					this.needDraw = true
					this.addLog = this.addLog + this.speedOne
					if (Math.ceil(this.addLog) >= this.pianoRowHeight) {
						let lastData = this.list[this.list.length - 1]
						if (lastData.data.includes(1)) {
							let blackArr = lastData.data.filter((item, index) => {
								return item == 1
							})
							this.calcMissNum = this.calcMissNum - blackArr.length
							this.calcMissNum = this.calcMissNum < 0 ? 0 : this.calcMissNum
							this.handleTestEffectClick('miss')
							this.perfectTimes = 0



							if (this.calcMissNum <= 0) {
								// 游戏结束
								this.handleGameOver()
								// this.pianoScroll = this.pianoScroll - this.addLog
								this.handleDraw('back')
								this.needDraw = true
								lastData.type = 'fail'
							} else {
								let data = this.handleGetRandomPinoData()
								this.list.unshift(data)
								this.listHeight = this.listHeight + 25
								this.list.pop()
							}


						} else {
							// 游戏继续
							let data = this.handleGetRandomPinoData()
							this.list.unshift(data)
							this.listHeight = this.listHeight + 25
							this.list.pop()
						}
						this.addLog = 0
					}
				}, this.pianoSpeed) // 20 25 50 
			},


			// 绘制相关
			handleDraw(type) {
				if (this.needDraw) {
					this.needDraw = false
					if (type == 'add') {
						this.pianoScroll = this.pianoScroll + this.speedOne
					} else if (type == 'back') {
						this.pianoScroll = this.pianoScroll - this.addLog
					} else if (type == 'reborn') {
						this.pianoScroll += this.addLog
					}
					this.frameId = this.myRequestAnimationFrame(this.handleDraw)
				}
			},
			myRequestAnimationFrame(callback) {
				const frameDuration = 1000 / 60; // 每秒60帧
				const currentTime = Date.now();
				const timeToCall = Math.max(0, frameDuration - (currentTime - this.lastTime));

				const id = setTimeout(() => {
					callback(currentTime + timeToCall);
				}, timeToCall);

				this.lastTime = currentTime + timeToCall;
				return id;
			},
			myCancelAnimationFrame(id) {
				clearTimeout(id);
			},
			handleCancleDraw() {
				if (this.frameId) {
					this.myCancelAnimationFrame(this.frameId)
				}
			}
		}



	}
</script>

<style lang="scss" scoped>
	.m-fun-game {
		z-index: 999999999999999;

		.testEffec {
			position: absolute;
			left: 200rpx;
			top: 500rpx;
			width: 150rpx;
			height: 150rpx;
			z-index: 99999;

			.one-effect {
				width: 100%;
				height: 100%;
				box-shadow: inset 0rpx 0rpx 10rpx rgba(255, 255, 255, 1);
				border-radius: 50%;
				animation: scaleEffect 1s linear infinite;
				opacity: 0;
			}

			.tow-effct {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				height: 100%;
				width: 100%;
				box-shadow: inset 0rpx 0rpx 10rpx rgba(255, 255, 255, 1);
				border-radius: 50%;
				opacity: 0;
				z-index: 9;
				animation: scaleEffect 1s linear infinite;
				animation-delay: 0.5s;
			}

			@keyframes scaleEffect {
				0% {
					opacity: 1;
					transform: scale(0.3);
				}

				100% {
					opacity: 0;
					transform: scale(1);
				}
			}
		}

		.top-btn {
			position: absolute;
			right: 30rpx;
			top: 250rpx;
			z-index: 999;

			.btn-item {
				position: relative;
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 40rpx;
				pointer-events: fill;
				border-radius: 50%;
			}
		}

		.piano-box {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;

			.start-piano-btn {
				position: absolute;
				left: 50%;
				// bottom: 200rpx;
				transform: translate(-50%, 50%);
				width: 400rpx;
				height: 100rpx;
				z-index: 999;
				background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
				background-size: 400%;
				border-radius: 50rpx;
				// animation: sun 10s linear infinite;

				&::after {
					content: "";
					width: 80%;
					height: 80%;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
					background-size: 400%;
					filter: blur(30rpx);
					z-index: -1;
				}

				.start-piano-btn-effect {
					width: 100%;
					height: 100%;
					border-radius: 50rpx;
					overflow: hidden;

					.start-pino-text {
						position: absolute;
						width: 100%;
						height: 100%;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						font-size: 48rpx;
						line-height: 48rpx;
						color: #fff;
						font-weight: 700;
						text-transform: uppercase;
						text-shadow: 0rpx 0rpx 8rpx rgba(0, 0, 0, .3);
						z-index: 1;
					}


					.start-effect-circle {
						position: relative;
						z-index: 9;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						box-shadow: inset 0rpx 0rpx 25rpx rgba(255, 255, 255, .8);
						animation: lineBling 4s linear infinite;
					}

					@keyframes lineBling {
						0% {
							transform: scale(1);
						}

						20% {
							transform: scale(6);
						}

						100% {
							transform: scale(6);
						}
					}

				}

			}

			.m-scroll {
				position: relative;
				width: 100%;
				height: 100%;
				background-size: cover;
				background-position: center center;
				background-repeat: no-repeat;
				overflow: hidden;
				z-index: 9;

				.score-box {
					position: absolute;
					left: 0rpx;
					width: 100%;
					z-index: 99;
					font-size: 70rpx;
					line-height: 70rpx;
					color: #fff;
					text-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, .4);
					font-weight: 700;

				}


				@keyframes effectShowAni {
					0% {
						opacity: 0.5;
						transform: scale(0.8);
					}

					80% {
						opacity: 1;
						transform: scale(1.2);
					}

					100% {
						opacity: 1;
						transform: scale(1);
					}



				}

				.bg-column-box {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					width: 100%;
					height: 100%;
					z-index: 1;

					.bg-column-item {
						flex: 1;
						height: 100%;
						border-right: 4rpx solid rgba(255, 255, 255, .1);

						&:last-child {
							border-right: none;
						}
					}
				}



				.start-content {
					position: absolute;
					left: 0rpx;
					bottom: 0rpx;
					width: 100%;
					height: 100%;
					transition-property: bottom;
					transition-duration: 0.1s;
					transition-timing-function: linear;
					will-change: bottom;
					z-index: 9;

				}
			}



			.life-box {
				position: absolute;
				right: 30rpx;
				z-index: 10;
				width: 100%;
				pointer-events: none;

				.life-box-content {
					position: absolute;
					right: 0rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 50rpx;
					height: 50rpx;
					pointer-events: none;
				}





				.heart-num {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					font-size: 20rpx;
					line-height: 20rpx;
					color: #fff;

				}
			}

			.over-shoot-box {
				position: absolute;
				left: 30rpx;
				z-index: 10;
				width: 100%;
				pointer-events: none;

			}

			.over-shoot {
				position: absolute;
				left: 0rpx;
				top: 50%;
				transform: translateY(-50%);
				height: 50rpx;
				border-radius: 25rpx;
				background-color: rgba(0, 0, 0, .1);

				.over-shoot-avatar {
					width: 42rpx;
					height: 42rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-left: 4rpx;
					margin-right: 10rpx;

				}



				.over-shoot-tips {
					font-size: 20rpx;
					line-height: 20rpx;
					color: #fff;
					margin-right: 20rpx;
				}

				.over-shoot-score {
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: 700;
					color: #fff;
					margin-right: 10rpx;
				}

			}




			.perfect-line {
				position: absolute;
				left: 0rpx;
				width: 100%;
				transform: translateY(50%);
				z-index: 8;
				pointer-events: none !important;
			}

			.perfect-only-line {
				height: 4rpx;
				background-color: rgba(255, 255, 255, 1);

			}


			.perfect-line-item {
				position: relative;
				flex: 1;
				pointer-events: none !important;

				.line-hollow-content {
					position: relative;
					flex: 1;
					height: 4rpx;
					background-color: rgba(255, 255, 255, 1);

					// box-shadow: 0rpx 0rpx 10rpx #00ffea,
					// 	0rpx 0rpx 6rpx #fff;
					.line-hollow-content-son {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 200%;
						height: 100%;
						background-color: #fff;
						z-index: 999;

					}
				}

				.line-solid-content {
					flex: 1;
					height: 4rpx;
					// background-color: rgba(255, 255, 255, 1);
					// box-shadow: 0rpx 0rpx 10rpx #fff,

				}

				.circle-hollow-content {
					position: relative;
					width: 26rpx;
					height: 26rpx;
					border-radius: 50%;
					border: 4rpx solid rgba(255, 255, 255, 1);
					margin-left: 2rpx;
					margin-right: 2rpx;
					z-index: 1000;
					pointer-events: none;


				}

				.circle-solid-content {
					position: relative;
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
					// background-color: #fff;
					margin-left: 2rpx;
					margin-right: 2rpx;
					// box-shadow: 0rpx 0rpx 10rpx rgba(255, 255, 255, 1);


					.circle-solid-con {
						position: relative;
						width: 100%;
						height: 100%;
						border-radius: 50%;
						z-index: 9;

					}

					.circle-solid-inner {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 200%;
						height: 200%;
						border-radius: 50%;
						z-index: 1;
						// background-color: rgba(255, 255, 255, .3);
						// box-shadow: 0rpx 0rpx 10rpx rgba(255, 255, 255, 1);
					}
				}



				.square-content {
					width: 6rpx;
					height: 6rpx;
					transform: rotate(45deg);
					background-color: #fff;
				}

				.line-item-ring {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					border: 4rpx solid transparent;
					opacity: 0.2;
					// box-shadow: 0rpx 0rpx 20rpx #fff, 0rpx 0rpx 10rpx #fff;


					.line-item-ring-center {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						border: 4rpx solid transparent;
						// box-shadow: 0rpx 0rpx 20rpx #fff;
					}
				}
			}


			.circle-effect-box {
				position: absolute;
				// left: 0rpx;
				// top: 0rpx;
				// width: 100%;
				// height: 100%;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 9;
				pointer-events: none;

				.circle-effect-img {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 500rpx;
					height: 500rpx;
					pointer-events: none;

					.circle-effect-inner {
						opacity: 0;
					}
				}

				.show-circle-effect {
					// opacity: 1;
					animation: showCircleAni 0.2s linear;
				}

				.ripple-effect {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 200rpx;
					height: 200rpx;


					.ripple-effect-content {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						animation: circleAni 0.5s linear forwards;

						.ripple-effect-content-center {
							content: "";
							width: 160rpx;
							height: 160rpx;
							border-radius: 50%;
						}


					}


				}

				@keyframes circleAni {
					0% {
						opacity: 1;
						transform: scale(1);
					}

					100% {
						opacity: 0;
						transform: scale(1.5);
					}
				}

				@keyframes showCircleAni {
					0% {
						transform: scale(1);
						opacity: 1;
					}

					80% {
						transform: scale(1.3);

						opacity: 1;
					}

					100% {
						transform: scale(0.8);
						opacity: 1;
					}
				}
			}

			.piano-list {
				position: absolute;
				left: 0rpx;
				bottom: 0rpx;
				width: 100%;
				flex-wrap: wrap;
				z-index: 999;


				.piano-row {
					width: 100%;
					// height: 25vh;

					.piano-column-item {
						position: relative;
						flex: 1;
						height: 100%;

						.piano-column-item-text {
							pointer-events: none;
							letter-spacing: 5rpx;
						}

						.piano-column-item-content {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 100%;
							height: 100%;
							z-index: 9;

							.piano-content-click-area {
								width: 100%;
								height: 100%;

								.piano-circle-img {
									border-radius: 50%;
								}
							}
						}

						.hidePianoColumnItem {
							opacity: 0;
						}

						.piano-click-effect {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 100%;
							height: 100%;
							z-index: 9;

							.piano-click-effect-content {
								width: 100%;
								height: 100%;
								// background-color: rgba(255, 255, 255, .3);
								border-radius: 10rpx;
								opacity: 0;
								animation: blackBlockClickImgAni 0.2s;

								.effect-after {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									width: 100%;
									height: 100%;
									box-shadow: inset 0rpx 0rpx 20rpx rgba(255, 255, 255, .8);
								}
							}

							.piano-click-effect-content-no-img {
								background-color: rgba(255, 255, 255, .3);
								animation: blackBlockClickNoImgAni 0.2s;
							}

							.pinao-click-effect-circle {
								border-radius: 50%;

								.effect-after {
									border-radius: 50%;
								}
							}

							@keyframes blackBlockClickImgAni {
								0% {

									transform: scale(0.9);
									opacity: 0.8;
								}

								100% {
									transform: scale(1.3);
									opacity: 0;
								}
							}

							@keyframes blackBlockClickNoImgAni {
								0% {
									box-shadow: 0rpx 0rpx 0rpx rgba(255, 255, 255, .8);
									transform: scale(0.9);
									opacity: 0.8;
								}

								100% {
									box-shadow: 0rpx 0rpx 40rpx rgba(255, 255, 255, .8);
									transform: scale(1.2);
									opacity: 0;
								}
							}

						}


					}

					.black-item {

						// background-image: linear-gradient(to bottom, rgba(42, 19, 135, 1)0%, rgba(14, 5, 65, 1) 100%);
						.piano-full-item {
							background-image: linear-gradient(to bottom, rgba(14, 5, 65, .8)0%, rgba(14, 5, 65, 1) 100%);
						}
					}

					.white-item {
						background-color: transparent;
					}

					.start-item {
						// background-color: #8151e5;
						background-image: linear-gradient(to bottom, rgba(14, 5, 65, .8)0%, rgba(14, 5, 65, 1) 100%);
						color: #fff;
						font-size: 50rpx;
						line-height: 50rpx;
						text-align: center;
						font-weight: 700;


					}

					.fail-bling {
						animation: blingAni 1.5s ease-in-out;
					}

					.fail-white {
						background-color: rgba(255, 0, 0, .8);
						animation: blingAni 1.5s ease-in-out;
					}

					.bling-item {
						background-image: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
						background-size: 400%;
						animation: sun 8s linear infinite;
					}




					@keyframes blingAni {
						0% {
							opacity: 0.5;
						}

						20% {
							opacity: 1;
						}

						40% {
							opacity: 0.5;
						}

						60% {
							opacity: 1;
						}

						80% {
							opacity: 0.5;
						}

						100% {
							opacity: 1;
						}

					}
				}
			}
		}


		.bubbles-box {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;


			.bgVideo {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			.bubble-table {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 100%;
				height: 100vh;
				z-index: 9;
				flex-wrap: wrap;

				.table-item {
					width: 20vw;
					height: 10vh;
					box-sizing: border-box;
					// border: 2rpx solid #ccc;

					.bubble-content {
						position: relative;
						border-radius: 50%;
						box-shadow: inset 0rpx 0rpx 20rpx rgba(255, 255, 255, .8);

						.bubble-effect {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 100%;
							height: 100%;
							pointer-events: none;

							.bubble-effect-content {
								width: 100%;
								height: 100%;
								font-size: 70rpx;
								line-height: 70rpx;
								font-weight: 700;
								color: #fff;
								text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .5);
								animation: bubbleEffectFly 0.3s ease-in-out;
							}

							@keyframes bubbleEffectFly {
								0% {
									transform: scale(0.8);
								}

								80% {
									transform: scale(1.2);
								}

								100% {
									transform: scale(1);
								}
							}


						}

						.bubble-item-border-in {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 200%;
							height: 200%;
							border-radius: 50%;
							z-index: 9;

							.bubble-item-border-content {
								width: 100%;
								height: 100%;
								border-radius: 50%;
								box-shadow: inset 0rpx 0rpx 20rpx rgba(255, 255, 255, .8);
								animation: bubbleScaleInAni 2s linear forwards;
							}

							.boder-in-hide {
								opacity: 0;
							}

						}

						.bubble-item-border-out {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 200%;
							height: 200%;
							border-radius: 50%;
							pointer-events: none;

							.bubble-item-border-content {
								width: 100%;
								height: 100%;
								border-radius: 50%;
								box-shadow: inset 0rpx 0rpx 20rpx rgba(255, 255, 255, .8);
								animation: bubbleScaleOutAni 0.5s ease-in-out forwards;
							}
						}





					}

					@keyframes bubbleScaleInAni {
						0% {
							transform: scale(1);
						}

						80% {
							transform: scale(0.5);
						}

						100% {
							transform: scale(0.5);
						}
					}

					@keyframes bubbleScaleOutAni {
						0% {
							transform: scale(0.5);
							opacity: 1;
						}

						80% {
							transform: scale(0.7);
							opacity: 0.2;
						}

						100% {
							transform: scale(0.7);
							opacity: 0;
						}
					}
				}
			}



			@keyframes bubbleScaleAni {
				0% {
					transform: scale(1);
				}

				80% {
					transform: scale(0.5);
				}

				100% {
					transform: scale(0.5);
				}
			}
		}



		.effect-box {
			position: absolute;
			left: 0rpx;
			width: 100%;
			height: 200rpx;
			z-index: 99;
			transition: transform 0.1s ease-in-out;
			pointer-events: none;

			.effect-img {
				width: 250rpx;
				height: 85rpx;
			}

			.perfect-times {
				width: 100%;
				font-size: 40rpx;
				line-height: 40rpx;
				font-weight: 700;
				color: #fff;
				text-shadow: 0rpx 0rpx 5rpx #d24cf5, 0rpx 0rpx 10rpx #d24cf5, 0rpx 0rpx 15rpx #d24cf5, 0rpx 0rpx 20rpx #d24cf5;
				text-align: center;
				letter-spacing: 5rpx;
				opacity: 0;
			}

			.show-effect-times {
				opacity: 1;
			}
		}

		.effect-show {
			transform: scale(1.3);
			// animation: effectShowAni 0.1s ease-in-out;
		}

	}

	@keyframes sun {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: -400%;
		}
	}

	.game-modal {
		z-index: 1000;
		animation: modalShowAni 0.3s linear;

		.modal-content {}

		.mode-modal-content {
			height: 1150rpx;
		}

		.prop-box {
			width: 100%;
			height: 100%;


			.prop-list {
				width: 600rpx;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.prop-item {
					width: 180rpx;
					margin-right: 30rpx;
					margin-bottom: 20rpx;
					box-sizing: border-box;

					.prop-item-content {
						position: relative;
						width: 130rpx;
						height: 130rpx;
						box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
						background-color: rgba(255, 255, 255, 0.3);
						overflow: hidden;
					}

					.prop-name {
						width: 100%;
						font-size: 18rpx;
						line-height: 18rpx;
						text-align: center;
						color: #a5a2a2;
						margin-top: 10rpx;

					}

					.prop-buy-btn {
						width: 130rpx;
						height: 45rpx;
						// background-color: #f9d972;
						background-image: linear-gradient(to right, #f3f1c6, #efcf80);
						color: #b27439;
						text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
						box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
						font-size: 24rpx;
						line-height: 24rpx;
						border-radius: 10rpx;
						margin-top: 10rpx;

						.consume-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}

					}

					.cancleBtn {
						background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
						color: #646369;
					}

					&:nth-child(3n) {
						margin-right: 0rpx;
					}

					.thing-num {
						position: absolute;
						right: 0rpx;
						bottom: 4rpx;
						display: inline-block;
						padding: 0 8rpx;
						font-size: 16rpx;
						color: #fff;
						background-color: rgba(0, 0, 0, 0.3);
						line-height: 20rpx;
					}



					.prop-masker {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						z-index: 999;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, .3);
						color: #fff;
						text-shadow: 0rpx 0rpx 2rpx purple;
						font-weight: 700;
						font-size: 20rpx;
						line-height: 20rpx;


					}


				}

			}
		}

		.game-set-box {
			position: relative;
			width: 100%;
			height: 100%;

			.setting-content {
				width: 100%;
				height: 150rpx;
			}

			.save-setting {
				position: absolute;
				left: 0rpx;
				bottom: 20rpx;
				width: 100%;

				.btn-box {
					margin-top: 0rpx;
					margin-bottom: 0rpx;
				}
			}

			.setting-scroll-box {
				width: 100%;
				height: 300rpx;

				.setting-scroll-content {
					width: 100%;
					box-sizing: border-box;
					padding-top: 20rpx;
				}

				.setting-scroll-list {
					width: 580rpx;
					box-sizing: border-box;
					flex-wrap: wrap;

					.setting-scroll-item {
						position: relative;
						width: 130rpx;
						height: 130rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						box-sizing: border-box;
						background-color: rgba(255, 255, 255, 0.3);
						box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
						padding: 10rpx;
						overflow: hidden;

						&:nth-child(4n) {
							margin-right: 0rpx;
						}


						.item-border-masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							z-index: 9999;
							width: 100%;
							height: 100%;
							border: 2rpx solid transparent;
						}

					}

					.full-img-scroll-item {
						padding: 2rpx;
						background-color: transparent;
						box-shadow: none;
					}

					.isSelected {
						animation: selecteAni 0.2s linear;
					}

					@keyframes selecteAni {

						0% {
							transform: scale(1);
						}


						50% {
							transform: scale(1.2);
						}

						100% {
							transform: scale(1);
						}

					}

					.act-setting-scroll-clothes {

						// border: 4rpx solid #fff;
						.item-border-masker {
							border-color: #fff;
						}
					}
				}

			}


			.judge-clothes-box {
				height: 150rpx;
			}

			.game-bg-box {
				width: 100%;
				height: 250rpx;

				.game-bg-item {
					display: inline-block;
					width: 100rpx;
					height: 200rpx;
					padding: 0rpx;
					border-radius: 6rpx;
					overflow: hidden;
					margin-right: 20rpx;
				}


			}
		}

		.sort-box {
			position: relative;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 0rpx 20rpx;

			.lord-info {
				.dance-power-icon {
					margin-right: 10rpx !important;
				}
			}


		}

		.reward-box {
			position: relative;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 0rpx 20rpx;

			.modal-top-switch {
				// height: 100rpx;

				.switch-tab-content {
					width: 300rpx;

				}


			}
		}
	}

	.no-bottom-tab {
		.mode-modal-content {
			padding-bottom: 10rpx;
		}
	}

	@keyframes modalShowAni {
		0% {
			transform: scale(1.1);
			opacity: 0.6;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.item-masker {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;

		.locked-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.btnIsClick {
		animation: buttonClickScale 0.1s linear;
	}

	.setting-use-item-label {
		position: absolute;
		left: 5rpx;
		top: 5rpx;
		font-size: 20rpx;
		line-height: 30rpx;
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
		color: #fff;
		font-weight: 700;
		text-align: center;
		z-index: 3;
		background-color: #5ce64c;

	}

	.game-result-box {
		z-index: 9999;
		background-color: rgba(0, 0, 0, .3);
		backdrop-filter: blur(15rpx);

		.result-stars-box {
			width: 100%;

			.result-star-item {
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0rpx;
				}

			}
		}

		.result-score-box {
			width: 100%;
			font-size: 80rpx;
			line-height: 80rpx;
			color: #fff;
			text-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, .4);
			font-weight: 700;
			margin-top: 80rpx;
		}

		.result-reward-box {
			width: 100%;
			height: 500rpx;
			margin-top: 200rpx;

			.success-reward-tip {
				width: 100%;
				height: 50rpx;
				box-sizing: border-box;
				padding: 0 100rpx;

				.left-line,
				.right-line {
					flex: 1;
					height: 1rpx;
					background-color: #fff;
				}

				.center-text {
					height: 100%;
					font-size: 28rpx;
					line-height: 50rpx;
					color: #fff;
					margin-left: 35rpx;
					margin-right: 35rpx;

					.tip-text {
						margin-left: 20rpx;
						margin-right: 20rpx;
					}

					.tip-icon {
						width: 15rpx;
						height: 15rpx;
					}
				}
			}


			.success-reward-list {
				width: 100%;
				margin-top: 50rpx;

				.reward-item {
					position: relative;
					width: 100rpx;
					height: 100rpx;
					margin-right: 15rpx;
					background-color: rgba(255, 255, 255, 0.3);
					box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);

					.thing-num {
						position: absolute;
						right: 0rpx;
						bottom: 4rpx;
						display: inline-block;
						padding: 0 10rpx;
						font-size: 18rpx;
						line-height: 18rpx;
						color: #fff;
						background-color: rgba(0, 0, 0, .3);
					}


				}

			}

		}

	}

	.reborn-box {
		z-index: 1000;
		background-color: rgba(0, 0, 0, .3);
		backdrop-filter: blur(15rpx);

		.tip-img {
			width: 400rpx;
			height: 130rpx;

			margin-bottom: 10rpx;
		}

		.tips-text {
			width: 100%;
			font-size: 30rpx;
			line-height: 30rpx;
			font-weight: 700;
			color: #fff;
			text-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, .4);
			margin-bottom: 300rpx;
			letter-spacing: 5rpx;
		}

		.reborn-btn {
			position: relative;
			width: 400rpx;
			height: 100rpx;
			z-index: 999;
			border-radius: 50rpx;
			margin-bottom: 40rpx;
			font-size: 48rpx;
			line-height: 48rpx;
			font-weight: 700;

			.reborn-btn-consume {
				position: absolute;
				left: 40rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.reborn-consume-icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 5rpx;
			}

			.reborn-consume-num {
				margin-right: 20rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				text-shadow: 0rpx 0rpx 6rpx rgba(0, 0, 0, .3);
				color: #fff;
			}

		}

		.reborn-btn-yes {
			background-image: linear-gradient(to right, #f3f1c6, #efcf80);
			color: #b27439;
		}

		.reborn-btn-no {
			background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
			color: #646369;
		}

	}

	.gray-scale {
		filter: grayscale(1)
	}
</style>